React注册倒计时功能

一、React版本
16.4.1
二、具体代码如下

1. 设置state属性

    constructor(props){
        super(props);
        this.state = {
            btnText:'获取验证码',
            seconds: 60, //称数初始化
            liked: true //获取验证码文案
        }
    }

2.倒计时

    // 获取验证码
    sendCode = () => {
        let siv = setInterval(() => {
            this.setState({
                liked:false,
                seconds:this.state.seconds - 1,    
            },() => {
                if(this.state.seconds == 0){
                    clearInterval(siv);
                    this.setState({
                        liked:true,
                        secounds:60
                    })
                }
            });    
        },1000);    
    }

3.jsx代码

            <FormItem
              {...formItemLayout}
              label="验证码"
            >
              <Row gutter={8}>
                <Col span={6}>
                  {getFieldDecorator('captcha', {
                    rules: [{ required: true, message: '请输入短信验证码!' }],
                  })(
                    <Input />
                  )}
                </Col>
                <Col span={12}>
                    <Button onClick={this.sendCode} disabled={!this.state.liked}>
                    {
                        this.state.liked
                        ?
                          <span>{this.state.btnText}</span>
                          :
                          <span>{this.state.seconds  + ' s 后重新发送'}</span>
                    }
                    </Button>
                </Col>
              </Row>
            </FormItem>

明明很简单的，但是看网上有的代码搞得很复杂一样，当然也可以用react相关插件，不过我觉得这样更简洁。